<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>北京小课堂</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>文本格式与图像插入</title>
    <link rel="stylesheet" href="../css/reveal/reveal.css">
    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">
    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">
    <!-- 打印和PDF输出样式 -->

    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h3>angular的核心思想是什么？怎么体现在代码里？</h3>
            <h4>小课堂【A组】</h4>
            <p>分享人：颜彦</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.拓展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
            <p>angular是什么？</p>
            <p>AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，
                已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、双向数据绑定、语义化标签、依赖注入等等。</p>
        </section>
        <section>
            <p>AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，
                但要构建WEB应用的话它就显得乏力了。AngularJS通过MVC模式（MVC）功能增强基于浏览器的应用，使开发和测试变得更加容易。
            </p>
        </section>
        <section>
            <p>通常，我们是通过js来解决静态网页技术在构建动态应用上的不足；但是原生js代码量会很大；</p>
            <p>类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等</p>
            <P>框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。目前比较流行的有angular，vue，React，
            </P>
        </section>
        <section>
            <section>
                <h3>2.知识剖析</h3>
                <p>angular的核心思想</p>
                <p>
                    Angular是创建在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而命令式编程非常适合来表示业务逻辑。[3]框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，Angular使得对DOM的操作不再重要并提升了可测试性。</p>
            </section>
            <section>
                <P>angular的亮点和过人之处！</P>
                <h4>1.代码组织结构清晰</h4>
                <p>AngularJS模块划分明确，不同的代码有其明确的存放处，可读性强，便于维护和扩展（后面会有代码组织结构图）。</p>
            </section>
            <section>
                <h4>2.功能模块易测试</h4>
                <p>AngularJS的代码方便测试。虽然代码易测试不能成为一个框架闪光的决定性因素，但是反向思考，如果写出来的代码可测试性差将会使工作效率事倍功半。</p>
            </section>
            <section>
                <h4>3.双向绑定</h4>
                <p>
                    双向绑定的出现，无可争议的大大简化了你的代码量，与其说是技术的革新，不如说是一场思想上的颠覆与突破。回想jQuery还需要通过在DOM中找到需要的元素并在其上添加事件监听，通过触发事件（如点击等）才能解析获取DOM元素中的值。而在AngularJS中只需要将DOM中的元素与js的某个属性绑定，js属性值变化会同步到DOM元素上，同样的，DOM元素值得变化也会映射到js的属性上。夸张点说，一个是刀耕火种，一个是蒸汽驱动。</p>
            </section>
            <section>
                <img src="../img/angularData binding-yy/201635151546605.jpg">
            </section>

        </section>
        <section>
            <h4>3.常见问题 </h4>
            <p>怎么体现在代码？</p>
        </section>
        <section>
            <h3>4.解决方案</h3>
            <img src="../img/angularData binding-yy/n2iaYbF.jpg">
        </section>
        <section>
            <p>AngularJS专业术语概览</p>
            <table style="font-size: 25px">
                <tr>
                    <td>名称</td>
                    <td>作用</td>
                </tr>
                <tr>
                    <td>Module</td>
                    <td>AngularJS中一切都是从Module模块开始的，模块是组织代码的容器，当然模块中还可以包含子模块</td>
                </tr>
                <tr>
                    <td>Routes</td>
                    <td>路由负责在应用中基于state进行页面的跳转</td>
                </tr>
                <tr>
                    <td>Views</td>
                    <td>Views是通过AngularJS编译后呈现的DOM</td>
                </tr>
                <tr>
                    <td>$scope</td>
                    <td> $scope 实际上就是一个JavaScript对象，controller和view都可以访问它，所以我们可以利用它在两者间传递信息。在这个 $scope
                        对象里，我们既存储数据，又存储将要运行在view上的函数。$scope是连接controller和view之间的桥梁，
                    </td>
                </tr>
                <tr>
                    <td>Controller</td>
                    <td>定义一些属性和方法用于绑定到view的元素上，一般来说，controller是比较轻量的，它里面只放一些负责view呈现的属性和方法</td>
                </tr>
                <tr>
                    <td>Directive</td>
                    <td>指令使得AngularJS能够创建自定义的标签并实现相应的功能，可以将指令看成一种特殊的html标签</td>
                </tr>
                <tr>
                    <td>Service</td>
                    <td>Service负责提供一些通用的功能函数，比如有些数据在多个controller中都会用到，就可以定义在一个service中</td>
                </tr>
            </table>
        </section>
        <section>
            <h4>5.编码实战 </h4>
        </section>
        <section>
            <h3>6.参考文献</h3>
            <p>参考一：<a href="http://www.tuicool.com/articles/aiMvQb3">AngularJS</a></p>
            <p>参考二：<a href="http://www.tuicool.com/articles/aiMvQb3">AngularJS</a></p>

        </section>
        <section>
            <h3>7.更多讨论</h3>
            <p>angular和jQuery哪个好用一些？</p>
        </section>
        <section>
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                <small>BY : 李仁 | 颜彦</small>
            </p>
        </section>
    </div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
